@import url('../../css/font.css');

html {
	-webkit-user-select: none;
	height: 100%;
}

#inappInterfaceGuide {
    margin-top: 102px;
    padding: ${css_vh(2)} ${css_vw(6.05)} ${css_vh(2)};
}

#inappInterfaceGuide .scaledView {
	transform: translate(-200px,-50px) scale(.7);
	z-index: 1000;
}

#inappInterfaceGuide #content {
    width: ${css_vh(164)};
    margin-left: auto;
    margin-right: auto;
}


#inappInterfaceGuide #content-buffer {
	color: #808080;
	margin-left: ${css_vh(14.31)};
	height: ${css_vh(7.24)};
	font-size: ${css_vh(2.3)};
}

/* Guide Elements */


#inappInterfaceGuide .interface-dot {
	height: ${Math.max(1, Math.ceil(5 * scaleMultiplier))}px;
	width: ${Math.max(1, Math.ceil(5 * scaleMultiplier))}px;
	border-radius: 50%;
	background-color: #333333;
	position: absolute;
}

#inappInterfaceGuide  .interface-vertical-line {
	border-left: 1px solid black;
	position: absolute;
}

#inappInterfaceGuide  .interface-horizontal-line {
	border-top: 1px solid black;
	position: absolute;
}

#inappInterfaceGuide  .interface-button {
	font-family: Roboto, arial, sans-serif;
	border-radius: 50%;
	position: absolute;
	border: 1px solid #808080;
	width: ${css_vh(5.26)};
	height: ${css_vh(5.26)};
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#inappInterfaceGuide  .interface-button-text {
	padding: ${css_vh(1.15)};
    font-size: ${css_vh(2.3)};
}

#inappInterfaceGuide  .interface-button-selected {
	border: 1px solid #2898CD;
	color: #2898CD;
}

/* Guide 1 - Interface Guide */

/* 1. Save */

#inappInterfaceGuide  #interface-button-save {
	left: ${css_vh(30.59)};
	top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-save {
	height: ${css_vh(2.47)};
	top: ${css_vh(-0.82)};
	left: ${css_vh(33.55)};
}

#inappInterfaceGuide  #interface-dot-save {
	top: ${css_vh(1.15)};
	left: ${css_vh(33.22)};
}

/* 2. Stage */

#inappInterfaceGuide  #interface-button-stage {
	left: ${css_vh(37.34)};
	top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-stage-1 {
	height: ${css_vh(26.4)};
	top: ${css_vh(-0.82)};
	left: ${css_vh(39.97)};
}

#inappInterfaceGuide  #interface-horizontal-line-stage-1 {
	width: ${css_vh(1.81)};
	top: ${css_vh(25.59)};
	left: ${css_vh(39.97)};
}

#inappInterfaceGuide  #interface-vertical-line-stage-2 {
	height: ${css_vh(34.05)};
	top: ${css_vh(7.07)};
	left: ${css_vh(41.61)};
}

#inappInterfaceGuide  #interface-horizontal-line-stage-2 {
	width: ${css_vh(1.32)};
	top: ${css_vh(7.07)};
	left: ${css_vh(41.61)};
}

#inappInterfaceGuide  #interface-horizontal-line-stage-3 {
	width: ${css_vh(1.32)};
	top: ${css_vh(41.12)};
	left: ${css_vh(41.61)};
}

/* 3. Presentation Mode */

#inappInterfaceGuide  #interface-button-presentation-mode {
    left: ${css_vh(43.09)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-presentation-mode {
    height: ${css_vh(2.47)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(45.72)};
}

#inappInterfaceGuide  #interface-dot-presentation-mode {
    top: ${css_vh(1.32)};
    left: ${css_vh(45.39)};
}

/* 4. Grid */

#inappInterfaceGuide  #interface-button-grid {
    left: ${css_vh(48.85)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-grid {
    height: ${css_vh(2.14)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(51.64)};
}

#inappInterfaceGuide  #interface-dot-grid {
    top: ${css_vh(1.32)};
    left: ${css_vh(51.32)};
}

/* 5. Change Background */

#inappInterfaceGuide  #interface-button-add-text {
    left: ${css_vh(60.69)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-add-text {
    height: ${css_vh(1.97)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(63.32)};
}

#inappInterfaceGuide  #interface-dot-add-text {
    top: ${css_vh(1.15)};
    left: ${css_vh(62.99)};
}

/* 6. Add Text */

#inappInterfaceGuide  #interface-button-change-background {
    left: ${css_vh(66.78)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-change-background {
    height: ${css_vh(2.14)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(69.41)};
}

#inappInterfaceGuide  #interface-dot-change-background {
    top: ${css_vh(1.32)};
    left: ${css_vh(69.08)};
}

/* 7. Reset Characters */

#inappInterfaceGuide  #interface-button-reset-characters {
    left: ${css_vh(77.47)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-reset-characters {
    height: ${css_vh(1.81)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(80.10)};
}

#inappInterfaceGuide  #interface-dot-reset-characters {
    top: ${css_vh(0.99)};
    left: ${css_vh(79.77)};
}

/* 8. Green Flag */

#inappInterfaceGuide  #interface-button-green-flag {
    left: ${css_vh(83.39)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-green-flag {
    height: ${css_vh(1.81)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(86.18)};
}

#inappInterfaceGuide  #interface-dot-green-flag {
    top: ${css_vh(0.99)};
    left: ${css_vh(85.86)};
}

/* 9. Pages */

#inappInterfaceGuide  #interface-button-pages {
    left: ${css_vh(96.22)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-pages {
    height: ${css_vh(2.47)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(99.01)};
}

#inappInterfaceGuide  #interface-dot-pages {
    top: ${css_vh(1.64)};
    left: ${css_vh(98.68)};
}

/* 10. Project Information */

#inappInterfaceGuide  #interface-button-project-information {
    left: ${css_vh(106.09)};
    top: ${css_vh(-6.25)};
}

#inappInterfaceGuide  #interface-vertical-line-project-information {
    height: ${css_vh(2.14)};
    top: ${css_vh(-0.82)};
    left: ${css_vh(108.88)};
}

#inappInterfaceGuide  #interface-dot-project-information {
    top: ${css_vh(1.32)};
    left: ${css_vh(108.55)};
}

/* 16. Characters */

#inappInterfaceGuide  #interface-button-characters {
    left: ${css_vh(18.91)};
    top: ${css_vh(73.68)};
}

#inappInterfaceGuide  #interface-vertical-line-characters-1 {
    height: ${css_vh(1.32)};
    top: ${css_vh(36.18)};
    left: ${css_vh(15.95)};
}

#inappInterfaceGuide  #interface-vertical-line-characters-3 {
    height: ${css_vh(1.32)};
    top: ${css_vh(36.18)};
    left: ${css_vh(37.17)};
}

#inappInterfaceGuide  #interface-horizontal-line-characters {
    width: ${css_vh(21.5)};
    top: ${css_vh(37.50)};
    left: ${css_vh(15.95)};
}

#inappInterfaceGuide  #interface-vertical-line-characters-2 {
    height: ${css_vh(36.18)};
    top: ${css_vh(37.50)};
    left: ${css_vh(21.71)};
}

/* 15. Block Categories */

#inappInterfaceGuide  #interface-button-block-categories {
    left: ${css_vh(29.61)};
    top: ${css_vh(73.68)};
}

#inappInterfaceGuide  #interface-vertical-line-block-categories-1 {
    height: ${css_vh(0.99)};
    top: ${css_vh(50.00)};
    left: ${css_vh(15.63)};
}

#inappInterfaceGuide  #interface-vertical-line-block-categories-3 {
    height: ${css_vh(0.99)};
    top: ${css_vh(50.00)};
    left: ${css_vh(46.05)};
}

#inappInterfaceGuide  #interface-horizontal-line-block-categories {
    width: ${css_vh(30.59)};
    top: ${css_vh(50.99)};
    left: ${css_vh(15.63)};
}

#inappInterfaceGuide  #interface-vertical-line-block-categories-2 {
    height: ${css_vh(22.70)};
    top: ${css_vh(50.99)};
    left: ${css_vh(32.40)};
}

/* 14. Block Palette */

#inappInterfaceGuide  #interface-button-block-palette {
    left: ${css_vh(59.70)};
    top: ${css_vh(73.68)};
}

#inappInterfaceGuide  #interface-vertical-line-blocks-palette-1 {
    height: ${css_vh(1.32)};
    top: ${css_vh(50.66)};
    left: ${css_vh(48.36)};
}

#inappInterfaceGuide  #interface-vertical-line-blocks-palette-3 {
    height: ${css_vh(1.32)};
    top: ${css_vh(50.66)};
    left: ${css_vh(98.1)};
}

#inappInterfaceGuide  #interface-horizontal-line-blocks-palette {
    width: ${css_vh(50.16)};
    top: ${css_vh(51.97)};
    left: ${css_vh(48.36)};
}

#inappInterfaceGuide  #interface-vertical-line-blocks-palette-2 {
    height: ${css_vh(21.71)};
    top: ${css_vh(51.97)};
    left: ${css_vh(62.50)};
}

/* 13. Programming Area */

#inappInterfaceGuide  #interface-button-programming-area {
    left: ${css_vh(68.09)};
    top: ${css_vh(73.68)};
}

#inappInterfaceGuide  #interface-vertical-line-programming-area {
    height: ${css_vh(4.11)};
    top: ${css_vh(69.74)};
    left: ${css_vh(70.72)};
}

#inappInterfaceGuide   #interface-dot-programming-area {
    top: ${css_vh(69.08)};
    left: ${css_vh(70.39)};
}

/* 12. Programming Script */

#inappInterfaceGuide  #interface-button-programming-script {
    left: ${css_vh(76.48)};
    top: ${css_vh(73.68)};
}

#inappInterfaceGuide   #interface-vertical-line-programming-script-1 {
    height: ${css_vh(1.64)};
    top: ${css_vh(63.32)};
    left: ${css_vh(65.79)};
}

#inappInterfaceGuide  #interface-vertical-line-programming-script-3 {
    height: ${css_vh(1.64)};
    top: ${css_vh(63.32)};
    left: ${css_vh(93.09)};
}

#inappInterfaceGuide  #interface-horizontal-line-programming-script {
    width: ${css_vh(27.47)};
    top: ${css_vh(64.97)};
    left: ${css_vh(65.79)};
}

#inappInterfaceGuide  #interface-vertical-line-programming-script-2 {
    height: ${css_vh(8.55)};
    top: ${css_vh(65.13)};
    left: ${css_vh(79.11)};
}

/* 11. Undo Redo */

#inappInterfaceGuide   #interface-button-undo-redo {
    left: ${css_vh(102.80)};
    top: ${css_vh(73.68)};
}

#inappInterfaceGuide  #interface-vertical-line-undo-redo-1 {
    height: ${css_vh(1.32)};
    top: ${css_vh(50.66)};
    left: ${css_vh(100.66)};
}

#inappInterfaceGuide  #interface-vertical-line-undo-redo-3 {
    height: ${css_vh(1.32)};
    top: ${css_vh(50.66)};
    left: ${css_vh(110.20)};
}

#inappInterfaceGuide  #interface-horizontal-line-undo-redo {
    width: ${css_vh(9.70)};
    top: ${css_vh(51.97)};
    left: ${css_vh(100.66)};
}

#inappInterfaceGuide  #interface-vertical-line-undo-redo-2 {
    height: ${css_vh(21.88)};
    top: ${css_vh(51.97)};
    left: ${css_vh(105.43)};
}

#inappInterfaceGuide  #right-column {
	display: block;
	overflow: auto;
	width: ${css_vh(45.39)};
}

#inappInterfaceGuide  #interface-key {
	/*width: ${css_vh(36.35)};
	height: ${css_vh(72.53)};
	float: left;
	margin-left: ${css_vh(9.05)};
	*/
	
	position: absolute;
    top: 374px;
    width: 800px;
	
	background-image: url("../images/keybackground.png");
	background-size: 100%;
	background-repeat: no-repeat;
}

#inappInterfaceGuide  #interface-key-header {
	font-size: ${css_vh(3)};
	padding-top: ${css_vh(1.64)};
	padding-left: ${css_vh(1.64)};
	color: #2898CD;
}

#inappInterfaceGuide  #interface-key-description {
    color: #808080;
    line-height: ${css_vh(3.62)};
    padding-top: ${css_vh(0.82)};
    padding-right: ${css_vh(2.47)};
    font-size: ${css_vh(2.3)};
    margin-right: ${css_vh(0.82)};
    margin-left: ${css_vh(3.29)};
}

#inappInterfaceGuide  #video-wrapper {
    margin-top: ${css_vh(1.97)};
    float: left;
    margin-left: ${css_vh(9.05)};
}

#inappInterfaceGuide  #ipad-project-view-wrapper {
	position: relative;
}

#inappInterfaceGuide  .learn-tab {
	display: none;
}

#inappInterfaceGuide  .learn-tab-selected {
	display: inline;
}

#inappInterfaceGuide  .ipad-project-view {
	margin-left: ${css_vh(14.31)};
	float: left;
	height: ${css_vh(72.70)};
}


/* End Guide 3 - Block Descriptions */
